<template>
  <el-card>
    <div>
      <div class="section-item" v-for="(item,index) in classInfoList" :key="index">
        <div class="section-header">
          <h5>{{ item.sectionName }}</h5>
          <div class="course-time-list">
            <div class="course-time-item" v-for="(resource,index) in item.resourceList" :key="index">
              <div>
                <svg-icon icon-class="ic_video" />
                <span class="course-time-title">{{ getFileNameWithoutExtName(resource.realName) }}</span>
              </div>
              <el-button size="small" link @click="playCourseHandler(resource)">开始学习</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script setup>
import SvgIcon from '@/components/SvgIcon/index.vue'
import { getFileNameWithoutExtName } from '@/utils/ruoyi.js'
import { useRouter } from 'vue-router'
let router = useRouter()
defineProps({
  classInfoList: {
    type: Array,
    required: true
  }
})

function playCourseHandler(resource) {
  router.push({path: `/course/play/${resource.id}/${resource.relationId}`})
}
</script>
<style scoped lang="scss">
.el-card {
  border: transparent;
  background: #ffffff;
  box-shadow: 0 2px 8px 4px rgba(0, 0, 0, .04);
  border-radius: 12px;
}

.course-time-list {
  margin-left: 2em;
}

.course-time-item {
  padding: 1em;
  transition: 0.5s;
  border-radius: 12px;

  .course-time-title {
    margin-left: 0.5em;
  }

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.course-time-item:hover {
  background-color: var(--el-menu-hover-bg-color);
  cursor : pointer;
}
</style>